let depid = 0;
class Dep {
  constructor() {
    this.id = depid++;
    this.subs = []; //存储的是与当前Dep关联的watcher
  }

  // 添加一个watcher
  addSub(sub) {
    this.subs.push(sub)
  }

  // 移除一个watcher
   removeSub(sub) {
    for(let i=this.subs.length-1;i>=0;i--) {
      if(sub === this.subs[i]) {
        this.subs.splice(i, 1)
      }
    }
  }

  // 将当前Dep与当前的watcher（暂时渲染watcher）关联
  depend() {
    if(Dep.target) {
      this.addSub(Dep.target); // 将当前的watcher关联到当前的dep上
      Dep.target.addDep(this); // 将当前的dep与档期啊的渲染watcher关联起来
    }
  }

  // 触发与之关联的watcher的update方法，起到更新的作用
  notify() {
    // 在真实的vue中是依次触发this.subs中的watcher的update方法
    if(Dep.target) {
      Dep.target.update()
    }
  }

}

/**
 * 全局的容器存储渲染watcher
 * let globalWatcher
 * 学vue的实现
 * 
 */
Dep.target = null;// 这就是全局的watcher

let targetStack = []
/*
将当前操作的watcher存储到全局watcher中，target就是当前的watcher
*/
function pushTarget(target) {
  targetStack.unshift(Dep.target) // vue源码使用push
  Dep.target = target;
}

/*
将当前操作的watcher剔除
*/
function popTarget() {
  Dep.target = targetStack.shift(); // 踢到最后就是undefined，vue源码是pop
}

/**
 * 在watcher调用get方法的时候，调用pushTarger（this)
 * 在watcher的get方法结束的时候，调用popTarger（this)
 */
